<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ room_name }}</title>
</head>
<body>
{{ room_name|json_script:"room-name" }}
{#<link href="{% static 'hadmin/css/plugins/toastr/toastr.min.css' %}" rel="stylesheet">#}
<link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet">
{#<script src="{% static 'hadmin/js/jquery.min.js' %}"></script>#}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{#<script src="{% static 'hadmin/js/plugins/toastr/toastr.min.js' %}"></script>#}
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<script>
    const roomName = JSON.parse(document.getElementById('room-name').textContent);
    let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
    let ws = new WebSocket(ws_scheme + '://' + window.location.host + '/ws/chat/' + roomName  + '/');

    ws.onopen = function () {
        console.log('WebSocket建立连接');
    };

    ws.onmessage = function (e) {
        console.log('WebSocket接收消息：');
        let data = JSON.parse(e.data);
        console.log(data);
        let message = data['message'];
        if (message.level === 1) {
            toastr.options = { // toastr配置
                "closeButton": true,
                "debug": false,
                "progressBar": true,
                "positionClass": "toast-top-center",
                "showDuration": "400",
                "hideDuration": "1000",
                "timeOut": "30000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.error(message.content, '警告');
        } else {
            toastr.options = { // toastr配置
                "closeButton": true,
                "debug": false,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "showDuration": "400",
                "hideDuration": "1000",
                "timeOut": "7000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.info(message.content, '信息')
        }
    };
    ws.onclose = function (e) {
        console.error('WebSocket关闭连接');
    };
</script>
</body>
</html>